<template>
  <div class="search-container">
    <h2>搜索输入：{{ $route.params.keyword }}</h2>

    <div v-if="loading" class="loading">加载中...</div>

    <div v-else>
      <div class="results-list">
        <div v-for="product in results" :key="product.productId" class="product-item">
          <router-link
              :to="{ name: 'ProductDetail', params: { productId: product.productId } }"
              class="product-link"
          >
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <div v-html="product.description"></div>
            </div>
          </router-link>
        </div>
      </div>


    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import service from '@/api/request0.js'

const route = useRoute()
const results = ref([])
const loading = ref(false)

watchEffect(async () => {
  try {
    loading.value = true
    results.value = await service.get(`/search/${encodeURIComponent(route.params.keyword)}`)

  } catch (error) {
    console.error('搜索失败:', error)
    results.value = []
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.search-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.results-list {
  margin-top: 20px;
}

.product-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  transition: box-shadow 0.2s;
}

.product-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-link {
  text-decoration: none;
  color: #333;
}

.product-info h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.no-results {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>